<template>
  <div>

    <!-- 1.定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/guke' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>预约管理</el-breadcrumb-item>
      <el-breadcrumb-item>确认预约</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.定义卡片视图 -->
    <el-card class="box-card">

      <!-- 员工数据表格展现  border 边框线属性  -->
      <el-table :data="temporaryList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="用户姓名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="person" label="入住人数"></el-table-column>
        <el-table-column prop="type" label="客房类型"></el-table-column>
        <el-table-column prop="reserve" label="预约时间"></el-table-column>
        <el-table-column prop="checkIn" label="入住时间"></el-table-column>
        <el-table-column prop="checkOut" label="退房时间"></el-table-column>
        <el-table-column prop="price" label="价钱"></el-table-column>
        <el-table-column prop="id" label="流水号"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="addOrders(scope.row)">确认支付</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteTemporary(scope.row)"></el-button>
            <div style="font-size: 14px;color: #666;">剩余支付时间(超时自动取消)</div>
            <div class="time"><i class="el-icon-time"></i> {{min}}分钟 {{sec}}秒 </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 定义分页组件 关于分页插件的属性说明
            1.@size-change 如果分页中每页实现的条数发生变化 则会触发这个该事件
            2.@current-change 当页数发生改变时,触发该函数
            3.current-page 当前选中的页
            4.page-sizes   页面数据展现的选项
            5.page-size    默认选中的页数
            6.layout    分页中展现的数据种类
            7.total     记录总数
       -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 20, 40]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    created() {
      this.getUserName()
    },
    data() {
      return {
        userName: '',
        queryInfo: {
          query: '',
          pageNum: 1,
          pageSize: 5,
          userName: ''
        },
        temporaryList: [],
        //记录总数是数值类型
        total: 0,
        dialogVisible: false,
        updateDialogVisible: false,
        //定义修改员工数据封装
        updatetemporaryModel: {}
      }
    },
    methods: {
      //倒计时
      countdown() {
        const m_30 = 30*60*1000 // 30分钟毫秒数，如十分钟倒计时，公式即为10*60*100，以此类推
        // const end = Date.parse(new Date('2021-12-30 16:30:00'))
        const now = new Date().getTime()
        const msec = m_30 - now

        console.log(msec)
        if (msec < 0) return;

        let min = parseInt(msec / 1000 / 60 % 30)
        let sec = parseInt(msec / 1000 % 60)
        this.min = min > 9 ? min : '0' + min
        this.sec = sec > 9 ? sec : '0' + sec
        const that = this
        if (min >= 0 && sec >= 0) {
          //倒计时结束关闭订单
          if (min == 0 && sec == 0) {

            return
          }
          setTimeout(function() {
            that.countdown()
          }, 1000)
        }
      },
      getUserName() {
        this.userName = localStorage.getItem("userName")
      },
      async gettemporaryList() {
        this.userName = localStorage.getItem("userName")
        this.queryInfo.userName = this.userName
        const {
          data: result
        } = await this.$http.get('/temporary/temporaryList', {
          params: this.queryInfo,
        })
        if (result.status !== 200) return this.$message.error("临时表查询失败")
        this.temporaryList = result.data.rows
        this.total = result.data.total
        console.log("总记录数:" + this.total)
      },
      handleSizeChange(pageSize) {
        //console.log("每页展现的条数"+pageSize)
        this.queryInfo.pageSize = pageSize
        this.gettemporaryList()
      },
      handleCurrentChange(pageNum) {
        //console.log("页数:"+pageNum)
        this.queryInfo.pageNum = pageNum
        this.gettemporaryList()
      },
      async addOrders(temporary) {
        //1.消息确认框
        const result = await this.$confirm('确认提交订单 ' + temporary.type + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => error)

        //如果确认  confirm  如果取消 cancel
        if (result !== 'confirm') {
          return this.$message.info("确认取消")
        }
        const {
          data: result2
        } = await this.$http.post(`/orders/addOrders/${temporary.id}`)
        if (result2.status !== 200) return this.$message.error("确认失败")
        this.$message.success("确认成功")
        //重新加载 数据
        this.$router.push("/orders")
      },
      async deleteTemporary(temporary) {
        //1.消息确认框
        const result = await this.$confirm('此操作将永久删除 ' + temporary.type + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => error)

        //如果确认  confirm  如果取消 cancel
        if (result !== 'confirm') {
          return this.$message.info("删除取消")
        }
        const {
          data: result2
        } = await this.$http.delete(`/temporary/${temporary.id}`)
        if (result2.status !== 200) return this.$message.error("删除失败")
        this.$message.success("删除成功")
        //this.$router.push("/sub")
        this.gettemporaryList()
      }
    },
    //利用钩子函数实现数据查询
    mounted() {
      this.gettemporaryList()
      this.countdown()
    }
  }
</script>


<style lang="less" scoped>

</style>
